<template>
    <div class="app-container">
      <!--工具栏-->
      <div class="head-container">
        <div>
          <!-- 搜索 -->
          <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
            <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
          <rrOperation :crud="crud" />
          <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="crud.toAdd"
        >新增</el-button>
        </div>
        <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
        <!-- <crudOperation :permission="permission" /> -->
        
        <!--表单组件-->
        <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" title="新增or修改" width="500px">
          <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
            <el-form-item label="省市名称" v-if="form.cityLevel ==0">
                <el-select v-model="form.cityId" filterable placeholder="请选择省市名称">
                  <el-option v-for="item in optionsRegionList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市名称" v-if="form.id && form.cityLevel ==1">
                <el-select v-model="form.cityId" filterable placeholder="请选择城市名称">
                  <el-option v-for="item in optionsCityList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模版名称" v-if="form.id && form.cityLevel ==1">
              <el-input v-model="form.templateName" style="width: 370px;" />
            </el-form-item>

            <el-form-item label="区县名称" v-if="form.id && form.cityLevel ==2">
                <el-select v-model="form.cityIds" multiple filterable placeholder="请选择区县名称" style="width: 100%;">
                  <el-option v-for="item in optionsCountyList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.cu === 2" type="primary" @click="submitSave()">确认</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" row-key="id"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @selection-change="crud.selectionChangeHandler">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column prop="cityName" label="区域名称" sortable width="180"></el-table-column>
            <el-table-column prop="mergerName" label="区域合并" sortable width="200"></el-table-column>
            <el-table-column prop="templateDesc" label="描述"> </el-table-column>
            <el-table-column prop="templateName" label="模版名称" width="150"> </el-table-column>
            <el-table-column prop="id" label="区域ID" width="100"> </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="130">
              <template slot-scope="scope">
                <el-button @click="addCityClick(scope.row)" type="text" size="small" v-if="scope.row.cityLevel ==0">+市</el-button>
                <el-button @click="addCountyClick(scope.row)" type="text" size="small" v-if="scope.row.cityLevel ==1">+区</el-button>
                <!-- <el-button type="text" size="small"><i class="el-icon-edit"></i></el-button> -->
                <el-button type="text" size="small"><i class="el-icon-delete"  @click="doDeleteClick(scope.row)"></i></el-button>
              </template>
            </el-table-column>
        </el-table>
        <pagination />
      </div>
    </div>
  </template>
  
  <script>
  import crudSyRegionManage from '@/api/regionManage'
  import { getRegionList } from '@/api/regionManage'
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import MaterialList from "@/components/material";
  
  // crud交由presenter持有
  const defaultCrud = CRUD({ title: '省份', url: 'api/syRegionManage', sort: 'id,desc', crudMethod: { ...crudSyRegionManage }})
  const defaultForm = { id: null, templateName: null, cityId: null, cityName: null, cityLevel: 0, parentId: null, mergerName: null, templateDesc: null,oldCityId:null ,cityIds:[]}
  export default {
    name: 'SyRegionManage',
    components: { pagination, crudOperation, rrOperation, udOperation ,MaterialList},
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    data() {
      return {
        optionsCityList:[],
        optionsRegionList:[],
        optionsCountyList:[],
        permission: {
          add: ['admin', 'syRegionManage:add'],
          edit: ['admin', 'syRegionManage:edit'],
          del: ['admin', 'syRegionManage:del']
        },
        rules: {
          cityId: [
            { required: true, message: '区域ID不能为空', trigger: 'blur' }
          ]
        },
        queryTypeOptions: [
          { key: 'templateName', display_name: '模版名称' },
          { key: 'cityId', display_name: '区域ID' },
          { key: 'mergerName', display_name: '区域合并名称' }
        ]
      }
    },
    watch: {
    },
    created() {
      let that = this;
      setTimeout(function() {
        that.getRegionListInit();
      }, 500);
    },
    methods: {
        doDeleteClick(data){
          this.$confirm(`确认删除选中的数据?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.crud.doDelete(data)
          }).catch(() => {
          })
        },
        addCityClick(data){   
          this.getRegionCityList(data);       
        },
        getRegionListInit(){
          getRegionList(0,0).then(res => {
            this.optionsRegionList = res;
          })
        },
        getRegionCityList(data){
          getRegionList(data.oldCityId,1).then(res => {
            this.optionsCityList = res;
            this.crud.toEdit(data);
            this.form.cityLevel =1;
            this.form.cityId ='';
            this.crud.status.add =1;
            this.crud.status.edit =0;
          })
        },
        addCountyClick(data){       
          this.getRegionCountyList(data);       
        },
        submitSave(){
          console.info(this.crud.status.add)
          console.info(JSON.stringify(this.form))
          this.crud.submitCU();
        },
        getRegionCountyList(data){
          getRegionList(data.oldCityId,2).then(res => {
            this.optionsCountyList = res;
            this.crud.toEdit(data);
            this.form.cityLevel =2;
            this.form.cityIds ='';
            this.crud.status.add =1;
            this.crud.status.edit =0;
          })
        },
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        const query = this.query
        if (query.type && query.value) {
          this.crud.params[query.type] = query.value
        }else{
          delete this.crud.params.templateName
          delete this.crud.params.cityId
          delete this.crud.params.mergerName
        }
        return true
      }, // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
      },
    }
  }
  
  
  
  </script>
  
  <style scoped>
    .table-img {
      display: inline-block;
      text-align: center;
      background: #ccc;
      color: #fff;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      vertical-align: middle;
      width: 32px;
      height: 32px;
      line-height: 32px;
    }
  </style>
  